<template>
  <div>
    <!-- 1.操作按钮区域 -->
    <div class="but">
      <el-button size="mini" type="primary" @click="buffer.isShow = true"
        >添加</el-button
      >
      <el-button size="mini" type="warning">批量删除</el-button>
    </div>

    <!-- 2.数据列表区域 -->
    <list-comp
      :userList="userList"
      :params="params"
      @edit="editUser"
      @remove="removeUser"
      @channel="getUserList"
    ></list-comp>

    <!-- 3.表单区域 -->
    <form-comp
      :buffer="buffer"
      ref="formRef"
      :roleList="roleList"
      @channel="getUserList"
    ></form-comp>
  </div>
</template>

<script>
//引入数据列表、添加编辑表单组件
import listComp from "./components/List.vue";
import formComp from "./components/Form.vue";
export default {
  components: {
    listComp,
    formComp,
  },
  data() {
    return {
      userList: [], //管理员数据
      roleList: [], //角色数据
      params: {
        page: 1,
        size: 5,
        totalPage: 0,
      },
      buffer: {
        isShow: false,
      },
    };
  },
  mounted() {
    //1.获取管理员数据
    this.getUserList();
    // 2.获取全部的角色数据
    this.getRoleList();
  },
  methods: {
    //1.获取管理员数据
    getUserList() {
        //解构获取请求参数
        let { size, page } = this.params;
        //1.1获取用户数据
        this.$api
        .reqUserList({ size, page })
        .then((res) => {
            this.userList = res ? res : [];
        })
        .catch((err) => console.log(err));

        //1.2获取用户数据信息总条数
        this.$api
        .reqUserCount()
        .then((res) => {
            this.params.total = res[0].total;
        })
        .catch((err) => console.log(err));
    },
    //2.获取全部的角色数据
    getRoleList() {
        this.$api
        .reqRoleList()
        .then((res) => {
            // console.log(res);
            this.roleList = res ? res : [];
        })
        .catch((err) => console.log(err));
    },

    //3.修改管理员信息
    editUser(info) {
        //3.1结构获取需要编辑的旧数据
        let { index, row } = info;
        //3.2删除无用字段
        delete row.id;
        delete row.randstr;
        delete row.rolename;
        row.password = "";
        //3.3将处理好的旧数据赋值给编辑表单
        this.$refs.formRef.form = JSON.parse(JSON.stringify(row));
        // 3.5弹起编辑窗口
        this.buffer.isShow = true;
    },
    // 4.删除管理员
    removeUser(info) {
      //3.1解构获取role组件传递的修改数据
      let { index, row } = info;
      //3.2提示用户是否删除
      this.$confirm("确定要删除吗?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //3.2用户同意删除
          this.$api
            .reqUserRemove({ id: row.id })
            .then((res) => {
              //3.4提示删除成功
              this.$notify({
                title: "成功",
                message: "删除成功",
                type: "success",
              });
              //3.5更新列表 重新获取列表数据
              this.getUserList();
            })
            .catch((err) => console.log(err));
        })
        .catch(() => {});
    },
  },
};
</script>

<style scoped>
.but {
  margin: 20px 0;
}
</style>
